<!-- 
《专辑页》

***显示***
1.album信息（待完善）
2.专辑包括的所有歌曲
3.背景信息（待完善）

***自动***
1.获取从上一页获取的albumID
2.通过albumID从云端获取album信息
3.将本album的所有歌曲的ID形成新的数组，提交到VueX的store

***动作***
1.删除本album的某个歌曲
	1）删除（待完善）
	2）下载到本地（未完成）
2.批量编辑本album的歌曲
	1）删除多首歌曲（待完善）
3.播放全部（未完成）
-->
<template>
	<view class="album" :style="{ '--background-image': `url(${album.coverPath})` }">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<view class="mask-layer" @tap.stop="hide" v-show="maskLayer"></view>

		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="歌单" :show='true' color='white'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title="歌单" :showButtonMore="false"></headBarAPP>
		<view class="iconfont button-more" @tap="more()">&#xe700;</view>
		<!-- #endif -->
		<view class="container">
			<view class="album-head">
				<view class="cover">
					<image :src="this.album.coverPath" mode="widthFix"></image>
					<text class="iconfont">&#xe620; {{3257410454 | formatCount}}</text>
				</view>
				<view class="text">
					<view class="name">{{album.name}}</view>
					<view class="desc">{{album.desc}}</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="album-share" open-type="share">
				<text class="iconfont">&#xe606;</text>分享给微信好友
			</button>
			<!-- #endif -->
			<view class="album-music-list">
				<!-- 正常显示 -->
				<view class="normal" v-if="!batchEditing">
					<view class="list-head">
						<view class="iconfont play-all" @tap="playAll()"> &#xe620;</view>
						<view class="text">播放全部</view>
						<view class="number">
							(共{{album.musicList.length}}首)</view>
						<view class="iconfont batch-edit" @tap="edit">&#xec60;</view>
					</view>
					<scroll-view scroll-y="true">
						<view class="list-item" v-for="(item,index) in musicList_details" :key="index"
							@tap="ToAudioDetails(index)">
							<view class="index">{{index+1}}</view>
							<view class="musicInfo">
								<view class="name">{{item.name}}</view>
								<view class="author"> {{item.author?item.author:'未知歌手'}}</view>
							</view>
							<view class="iconfont more" @tap.stop="pullDownMenu(index)">&#xe700;</view>
						</view>
					</scroll-view>
					<view class="blank"></view>
				</view>
				<!-- 批量编辑 -->
				<view class="batchEdit" v-else>
					<view class="list-head">
						<text class="iconfont play-all" @tap="selectAll()">
							{{selectedList.selectAll?'&#xe65b;':'&#xe623;'}} </text>
						<text class="text"> 全选</text>
						<text class="number"> (共{{album.musicList.length}}首)</text>
						<text class="iconfont batch-edit" @tap="edit">
							&#xec60;</text>
					</view>
					<scroll-view scroll-y="true">
						<view class="list-item" v-for="(item,index) in album.musicList" :key="index">
							<text class="iconfont checkBox" @tap.stop="selectMusic(index)">
								{{selectedList.musicList[index]?'&#xe65b;':'&#xe623;'}} </text>
							<view class="musicInfo">
								<view class="name">{{item.name}}</view>
								<view class="author"> {{item.author?item.author:'未知歌手'}}</view>
							</view>
							<view class="iconfont more">&#xe831;</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 点击歌曲右边更多按钮后的底部弹窗 -->
		<view class="down-menu" :class="{'activate':showDownMenu}" v-show='showDownMenu'>
			<view class="item" @tap.stop='deleteMusic()'>
				<text class="iconfont">&#xe605;</text>
				删除
			</view>
			<view class="item">
				<text class="iconfont">&#xe60d;</text>
				下载
			</view>
			<view class="item">
				<text class="iconfont"> &#xe60d;</text>
				删除
			</view>
		</view>
		<!-- 点击右上角更多按钮后的弹窗 -->
		<view class="windwow-more-top-right" v-show="showWindowMore">
			<view class="item album-edit" @tap="album_edit()">
				<text class="iconfont">&#xec60;</text>编辑信息
			</view>
			<view class="item album-edit" @tap="album_delete()">
				<text class="iconfont">&#xe605;</text>删除歌单
			</view>
		</view>
		<!-- 底部播放器 -->
		<player class="player-down" v-if="!batchEditing" v-show="show_Downplayer"></player>
		<!-- 批量编辑菜单 -->
		<view class="menu" v-else>
			<view class="item left" @tap="collectToMyAlbum()">
				<text class="iconfont">&#xe744;</text>
				<view class="text">收藏</view>
			</view>
			<view class="item right" @tap="deleteMusics()">
				<text class="iconfont">&#xe605;</text>
				<view class="text">删除</view>
			</view>
		</view>

		<!-- 收藏 我的歌单列表 -->
		<view class="window-myAlbum" v-show="showWindow_myalbum">
			<view class="album-list">
				<view class="item" v-for="(item ,index) in myAlbumList" :key="index" @tap.stop="chooseAlbum(index)">
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import player from '@/components/player/player.vue'
	import headBarWX from '@/components/headBarWX/headBarWX.vue'
	import headBarAPP from '@/components/headBarAPP/headBarAPP.vue'
	// 导入云对象
	const cloudMusic = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});
	const Album = uniCloud.importObject('Album', {
		customUI: true // 取消自动展示的交互提示界面
	});
	const Music = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});

	export default {
		data() {
			return {
				// 信息
				album: {
					_id: '',
					title: '专辑名字',
					desc: '专辑描述',
					musicList: [],
					coverPath: '',
				},
				musicList_details: [],
				// 我的歌单列表
				myAlbumList: [],
				pickMusicIndex: -1,

				// 标识变量
				batchEditing: false,
				selectedList: {
					selectAll: false,
					musicList: [],
				},
				showDownMenu: false,
				showWindowMore: false,
				showWindow_myalbum: false,
				maskLayer: false,
				show_Downplayer: false,
			}
		},
		components: {
			headBarWX,
			headBarAPP
		},
		onLoad(options) {
			console.log('<<<<<<<<<<<<<<<<<<<<歌单页>>>>>>>>>>>>>>>>>>>>')
			const albumInfo = JSON.parse(options.albumInfo);
			const albumID = albumInfo.albumID
			if (albumInfo.albumID == -1) {
				console.log('获取全部歌曲');
				cloudMusic.getMusicList().then(res => {
					this.album = {
						name: '全部歌曲',
						musicList: res.data,
					}
				})
				return 0;
			}
			if (albumInfo.personalAlbum) {
				console.log("获取个人专辑详情");
				Album.GetAlbumInfo(albumID).then(res => {
					console.log('专辑信息：', res);
					this.album = res;
					//获取音乐信息
					Music.Get_all_musicInfo_by_idList(this.album.musicList).then(res => {
						console.log(res);
						this.musicList_details = res.data;
					});
				});
			} else {
				console.log("获取公共专辑详情");
				Album.getAlbumInfo(albumID).then(res => {
					console.log('专辑信息：', res);
					this.album = res;
				});
			}
		},
		onShow() {
			// 判断是否显示底部播放器
			const app = getApp();
			if (app.musicInfo.name) {
				this.show_Downplayer = true;
				setTimeout(() => { // 等待底部播放器组件创建完毕后更新
					uni.$emit('updatePlayerStatus');
				}, 100);
			} else {
				console.log('无音乐');
				this.show_Downplayer = false;
			}

			let updateAlbumInfo = uni.getStorageSync('updateAlbumInfo');
			if (updateAlbumInfo) {
				uni.setStorageSync('updateAlbumInfo', false);
				console.log('歌单已修改');
				Album.getAlbumInfo(this.album._id).then(res => {
					console.log('最新专辑信息：', res);
					this.album = res;
				});
			}
		},
		methods: {
			/**更多
			 * 
			 */
			more() {
				console.log('更多');
				this.showWindowMore = true;
				this.maskLayer = true;
			},
			/**播放音乐，更新全局音乐列表ID
			 * @param {Object} index
			 */
			ToAudioDetails(index) {
				if (this.batchEditing) {
					console.log('请先完成编辑');
					return;
				}
				// 更新全局音乐列表
				const data = {
					musicList: this.album.musicList,
					currentIndex: index,
				}
				uni.$emit('musicList', data);

				let id = this.album.musicList[index]._id;
				uni.navigateTo({
					url: '/pages/musicPlay/musicPlay?musicID=' + id,
				});
			},
			/**上拉菜单
			 * @param {Object} index
			 */
			pullDownMenu(index) {
				this.pickMusicIndex = index;
				console.log('pullDownMenu');
				this.showDownMenu = true;
				this.maskLayer = true;
			},
			/**隐藏浮窗
			 * 
			 */
			hide() {
				console.log('hideWindow');
				this.maskLayer = false;
				this.showWindow_myalbum = false;
				this.showWindowMore = false;
				this.showDownMenu = false;
			},

			//////右上角按钮
			/**编辑歌单信息
			 * 
			 */
			album_edit() {
				console.log('编辑信息');
				this.hide();
				uni.navigateTo({
					url: '/pages/album/album_modify/album_modify?albumObject=' + JSON.stringify(this.album),
				});
			},
			/**删除歌单
			 * 
			 */
			album_delete() {
				console.log('删除歌单');
				Album.deleteAlbum(this.album._id).then(res => {
					console.log(res);
				});
				this.hide();
				uni.navigateBack();
				return 0;
			},

			//////批量编辑函数
			/**开始批量编辑
			 * 
			 */
			edit() {
				console.log('批量编辑');
				this.batchEditing = !this.batchEditing;
				this.album.musicList.forEach((item, index) => {
					this.selectedList.musicList[index] = false;
				})
			},
			/**选择歌曲
			 * @param {Object} index
			 */
			selectMusic(index) {
				this.selectedList.musicList[index] = !this.selectedList.musicList[index];
				if (this.selectedList.musicList[index]) {
					console.log('选中');
				} else {
					console.log('取消');
					if (this.selectedList.selectAll) {
						console.log('取消全选');
						this.selectedList.selectAll = false;
					}
				}
				this.$forceUpdate();
			},
			/**全选歌曲
			 * 
			 */
			selectAll() {
				console.log(this.selectedList.selectAll);
				this.selectedList.selectAll = !this.selectedList.selectAll;
				if (this.selectedList.selectAll) {
					this.selectedList.musicList.forEach((item, index) => {
						this.selectedList.musicList[index] = true;
					})
					console.log(this.selectedList);
				} else {
					this.selectedList.musicList.forEach((item, index) => {
						this.selectedList.musicList[index] = false;
					})
					console.log(this.selectedList);
				}
				this.$forceUpdate()
			},
			/**删除单首歌
			 * 
			 */
			deleteMusic() {
				console.log('删除单首音乐');
				let index = this.pickMusicIndex;
				this.album.musicList.splice(index, 1); // 删除当前元素

				let albumInfo = {
					_id: this.album._id,
					minusNumber: 1,
					musicList: this.album.musicList,
				}

				console.log('最新歌单信息', albumInfo);

				Album.deleteAlbumMusicList(albumInfo).then(res => {
					console.log(res);
				});

				this.hide();
			},
			/**批量删除音乐
			 * 
			 */
			deleteMusics() {
				console.log('批量删除歌单音乐')

				let minusNumber = 0;
				for (let i = 0; i < this.album.musicList.length; i++) {
					if (this.selectedList.musicList[i]) {
						this.album.musicList.splice(i, 1); // 删除当前元素
						this.selectedList.musicList.splice(i, 1);
						minusNumber++;
						i--;
					}
				}

				let albumInfo = {
					_id: this.album._id,
					minusNumber: minusNumber,
					musicList: this.album.musicList,
				}

				console.log('最新歌单信息', albumInfo);

				Album.deleteAlbumMusicList(albumInfo).then(res => {
					console.log(res);
				});

				return 0;
			},
			/**收藏到我的歌单
			 * 
			 */
			collectToMyAlbum() {
				console.log('收藏到我的歌单', this.selectedList);
				if (!this.selectedList.musicList.includes(true)) {
					uni.showToast({
						title: '没有选择歌曲',
						duration: 2000,
						icon: 'none'
					});
					return 0;
				}
				// 弹出窗口
				this.showWindow_myalbum = true;
				this.maskLayer = true;

				// 获取我的歌单
				Album.GetAlbumList_e_albumList().then(res => {
					this.myAlbumList = res.data;
				});
			},
			/**播放所有歌曲
			 * 
			 */
			playAll() {
				console.log('播放所有歌曲')
			},
			/**选择歌单
			 * 
			 */
			chooseAlbum(index) {
				let selectedAlbum = this.myAlbumList[index];
				console.log('选择歌单', selectedAlbum);
				uni.showModal({
					title: '提升',
					content: '确定收藏到' + selectedAlbum.name,
				}).then(res => {
					if (res.confirm) {
						console.log('用户点击确定');
						const boolenSelectedMusic = this.selectedList.musicList;
						const selectedMusic = this.album.musicList.filter((item, index) => {
							if (boolenSelectedMusic[index]) {
								return true;
							} else {
								return false;
							}
						});
						const musicInfo = {
							_id: selectedAlbum._id,
							musicList: selectedMusic,
						}
						Album.addAlbumMusicList(musicInfo).then(res => {
							console.log(res);
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button-more {
		font-size: $icon-size-m-s;
		position: fixed;
		right: 20rpx;
		top: 24rpx;
	}

	.window-myAlbum {
		z-index: 100;
		position: fixed;
		bottom: 0;
		background-color: white;
		width: 100%;
		min-height: 300rpx;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, 0.1);

		.album-list {
			.item {
				margin: 20rpx 30rpx;

				.name {
					font-size: $font-size-m-m;
				}
			}
		}
	}

	.player-down {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
	}

	.menu {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 160rpx;
		border-top: 3rpx solid rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: space-between;

		.item {
			width: 100rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: $icon-size-m-m;
				color: $text-color-grey;
			}

			.text {
				font-size: $font-size-m-m;
			}
		}

		.item.left {
			margin-left: 50rpx;
		}

		.item.right {
			margin-right: 50rpx;
		}
	}

	.album::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vw;
		background-size: cover;
		background-image: var(--background-image, none);
		background-position: center;
		filter: blur(20px);
		z-index: -1;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.album-head {
		display: flex;
		margin: 30rpx;
		position: relative;
		z-index: 0;

		.cover {
			width: 300rpx;
			height: 300rpx;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			margin-right: 42rpx;
		}

		.cover image {
			width: 100%;
			height: 100%;
		}

		.cover text {
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			color: white;
			font-size: $font-size-l-m;
		}

		.text {
			flex: 1;
			color: #f0f2f7;

			.name {
				color: white;
				font-size: 34rpx;
			}

			.desc {
				display: flex;
				margin: 20rpx 0;
				font-size: 24rpx;
				align-items: center;
			}
		}
	}

	.album-share {
		width: 330rpx;
		height: 74rpx;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 37rpx;
		color: white;
		text-align: center;
		line-height: 74rpx;
		font-size: 28rpx;

		text {
			margin-right: 16rpx;
		}
	}

	.album-music-list {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 73vh;
		background: white;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		margin-top: 40rpx;
		overflow: hidden;
		box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.1);

		.list-head {
			margin: 30rpx 30rpx 20rpx 30rpx;
			display: flex;
			align-items: center;
			position: relative;

			.iconfont.play-all {
				font-size: $icon-size-l-m;
			}

			.text {
				font-size: $font-size-m-m;
				margin-left: 20rpx;
			}

			.number {
				margin-left: 10rpx;
				font-size: $font-size-s-s;
				color: #b2b2b2;
			}

			.iconfont.add-new-music {
				position: absolute;
				right: 70rpx;
				font-size: $icon-size-s-m;
			}

			.iconfont.batch-edit {
				position: absolute;
				right: 0;
				font-size: $icon-size-s-m;
			}
		}

		// 正常情况下
		.normal {
			height: 100%;

			scroll-view {
				height: 80%;

				.list-item {
					display: flex;
					margin: 10rpx 10rpx 20rpx 20rpx;
					align-items: center;
					color: #959595;

					.index {
						display: flex;
						justify-content: center;
						width: 58rpx;
						font-size: $font-size-l-m;
						line-height: 30rpx;
					}

					.musicInfo {
						margin-left: 10rpx;
						flex: 1;

						.name {
							font-size: 28rpx;
							color: black;
							width: 70vw;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.author {
							font-size: 20rpx;
							align-items: center;
							width: 70vw;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}

					.iconfont.more {
						font-size: $icon-size-s-s;
						color: #c7c7c7;
						margin-right: 10rpx;
					}
				}
			}
		}


		// 批量编辑情况
		.batchEdit {
			scroll-view {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 900rpx);
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 750rpx);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 760rpx);
				/* #endif */

				.list-item {
					display: flex;
					margin: 10rpx 10rpx 20rpx 20rpx;
					align-items: center;
					color: #959595;

					.checkBox {
						display: flex;
						justify-content: center;
						width: 58rpx;
						font-size: $font-size-l-m;
						line-height: 30rpx;
					}

					.musicInfo {
						margin-left: 10rpx;
						flex: 1;

						.name {
							font-size: 28rpx;
							color: black;
							width: 70vw;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.author {
							font-size: 20rpx;
							align-items: center;
							width: 70vw;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.iconfont.more {
						font-size: $icon-size-s-s;
						color: #c7c7c7;
						margin-right: 10rpx;
					}
				}
			}

		}
	}

	.down-menu {
		z-index: 100;
		position: fixed;
		bottom: -100%;
		width: 100%;
		background: white;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		transition: bottom 1s ease;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		padding-top: 30rpx;
		padding-bottom: 50rpx;

		box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.4);

		.item {
			width: 90%;
			height: 100rpx;
			border-bottom: 3rpx solid rgba(0, 0, 0, 0.4);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		text {
			font-size: $icon-size-m-m;
			margin-right: 30rpx;
		}
	}

	.down-menu.activate {
		bottom: 0;
	}

	.windwow-more-top-right {
		z-index: 100;
		position: fixed;
		right: 10rpx;
		top: 80rpx;
		width: 200rpx;
		min-height: 100rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, 0.1);

		.item:first-child {
			margin-top: 10rpx;
		}

		.item:last-child {
			margin-bottom: 10rpx;
		}

		.item {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: $icon-size-m-m;
				margin-right: 10rpx;
			}
		}
	}
</style>